<!DOCTYPE html>
<html lang="zh-CN" style="overflow: hidden;" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{shared/layout.html}">

<head>
    <!--styles 样式-->
    <style type="text/css">
        html,
        body {
            background: #ffffff;
        }
    </style>
</head>

<body>
<th:block layout:fragment="body">
    <div class="m-20 hzyAdminForm" id="app" v-cloak>
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-6">
                    <h4 class="example-title">用户名称</h4>
                    <input type="text" class="form-control" placeholder="请输入 用户名称" v-model="form.vm.model.name"
                           autocomplete="off"/>
                </div>
                <div class="col-sm-6">
                    <h4 class="example-title">登录名称</h4>
                    <input type="text" class="form-control" placeholder="请输入 登录名称"
                           v-model="form.vm.model.accountName" autocomplete="off"/>
                </div>
                <div class="col-sm-6">
                    <h4 class="example-title">密码</h4>
                    <input type="password" class="form-control" placeholder="请输入 密码"
                           v-model="form.vm.model.password" autocomplete="off"/>
                </div>
                <div class="col-sm-6">
                    <h4 class="example-title">邮件</h4>
                    <input type="email" class="form-control" placeholder="请输入 邮件" v-model="form.vm.model.email"
                           autocomplete="off"/>
                </div>
                <div class='col-sm-12'>
                    <h4 class='example-title'>角色</h4>

                    <el-checkbox-group v-model="form.vm.roleIds">
                        <div class="row">
                            <div class="col-sm-4" v-for="(item,index) in form.vm.allRoleList" :key="index">
                                <el-checkbox :label="item.id">
                                    {{item.name}}
                                </el-checkbox>
                            </div>
                        </div>
                    </el-checkbox-group>

                </div>
            </div>
            <div class="hzyAdminForm-footer">
                <div class="row">
                    <div class="col-sm-6"></div>
                    <div class="col-sm-6 text-right">
                        <button class="btn btn-primary" @click="save" :disabled="form.saveState"
                                v-if="power.save">保存
                        </button>
                        <button class="btn btn-danger" @click="closeWindow()">关闭</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--js 脚本-->
    <input type="hidden" th:value="${power}" id="power">
    <input type="hidden" th:value="${id}" id="formKey">
    <script type="text/javascript">
        let power = JSON.parse(document.getElementById("power").value);
        let formKey = document.getElementById("formKey").value;
        let app = new Vue({
            el: "#app",
            data: function () {
                return {
                    prefix: '/admin/system/user',
                    power,
                    form: {
                        saveState: false,
                        vm: {
                            id: formKey,
                            model: {},
                            roleIds: [],
                            allRoleList: []
                        }
                    }
                }
            },
            created: function () {
                this.loadForm();
            },
            mounted: function () {

            },
            methods: {
                loadForm: function () {
                    let _this = this;
                    let path = _this.prefix + '/find' + (_this.form.vm.id ? '/' + _this.form.vm.id :
                        '');

                    hzyAdmin.post(path, {}, function (r) {
                        if (r.code !== 1) return;
                        _this.form.vm = r.data;
                    });
                },
                closeWindow: function (delay = 0) {
                    setTimeout(function () {
                        hzyAdmin.layer.close(hzyAdmin.layer.getFrameIndex(window.name));
                    }, delay);
                },
                save: function () {
                    let _this = this;
                    let path = _this.prefix + '/save';

                    //验证
                    if (!this.form.vm.model.name) return hzyAdmin.alert('用户名不能为空!', '警告');

                    this.form.saveState = true;
                    hzyAdmin.post(path, this.form.vm, function (r) {
                        _this.form.saveState = false;
                        if (r.code === 1) {
                            hzyAdmin.alert('保存成功', '成功');
                            //关闭当前窗口
                            _this.closeWindow();
                        }
                    });
                }
            }
        });
    </script>
</th:block>
</body>

</html>